<template>
  <detail-page title="工作小结管理详情" @close="close">
    <abstract-form>
      <el-card>
        <el-tabs v-model="activeName" tab-position="top">
          <el-tab-pane label="已上传工作小结用户" name="0"></el-tab-pane>
          <el-tab-pane label="未上传工作小结用户" name="1"></el-tab-pane>
          <template v-if="activeName == 0">
            <abstract-table :data="uploaded">
              <el-table-column
                align="center"
                label="姓名"
                prop="users_name"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="电话"
                prop="users_tel"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="岗位"
                prop="orgPost_title"
                show-overflow-tooltip
              />
            </abstract-table>
          </template>
          <template v-if="activeName == 1">
            <abstract-table :data="nonuploaded">
              <el-table-column
                align="center"
                label="姓名"
                prop="users_name"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="电话"
                prop="users_tel"
                show-overflow-tooltip
              />
              <el-table-column
                align="center"
                label="岗位"
                prop="orgPost_title"
                show-overflow-tooltip
              />
            </abstract-table>
          </template>
        </el-tabs>
      </el-card>
    </abstract-form>
  </detail-page>
</template>

<script>
import DetailPage from '@/views/_common/DetailPage'
import AbstractForm from '@/components/abstract/Form'
import AbstractTable from '@/components/abstract/Table'
import { closeCurrentPage } from '@/utils/route'
import { request } from '@/api/request'

export default {
  name: 'NeedToScoreMark',

  components: {
    DetailPage,
    AbstractTable,
    AbstractForm
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data() {
    return {
      nonuploaded: [],
      uploaded: [],
      activeName: '0',
      form: {
        postDetail: []
      },
      tableData: [],
      options: [
        {
          label: '认真负责 - 2分',
          value: 0
        },
        {
          label: '细心 - 2分',
          value: 1
        }
      ]
    }
  },

  computed: {},

  mounted() {
    this.init()
  },

  methods: {
    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/detail')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    init() {
      request(
        'company/workSum/workSumNotice/detail',
        { id: this.id },
        (res) => {
          this.nonuploaded = res.data.nonuploaded
          this.uploaded = res.data.uploaded
          this.data = res.data
        }
      )
    },

    commit() {}
  }
}
</script>
